<template>
  <div class="echart_container">
    <div ref="echart" style="height: 50%"></div>
    <div ref="echart2" style="height: 50%"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initEchart();
    this.initEchart2();
  },
  methods: {
    initEchart() {
      let charts = this.$echarts.init(this.$refs["echart"]);
      let option = {
        color: ["red"], //设置颜色
        title: {
          text: "成绩", //标题展示
          textStyle: {
            color: "#6a9955", //标题颜色
            fontStyle: "normal", //标题字体【italic（斜体）,normal（通用）】
          },
        },
        xAxis: {
          type: "category", //类目轴
          data: ["小明", "小青", "小红", "小智"],
        },
        yAxis: {
          type: "value", //数值轴，不需要指定【data】
        },
        series: [
          {
            name: "语文",
            type: "bar", //图表类型【bar,line,pie】
            data: [78, 60, 99, 55],
            markPoint: {
              // 图表标注
              data: [
                //标注的数据数组
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            markLine: {
              //图表标线
              data: [
                //标线的数据数组
                {
                  name: "平均线", // 支持 'average', 'min', 'max'
                  type: "average",
                },
              ],
            },
            label: {
              //图形上的文本标签
              show: true, //是否展示
              position: "inside", //展示位置【top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight】
            },
          },
        ],
      };
      charts.setOption(option);
    },
    initEchart2() {
      let charts = this.$echarts.init(this.$refs["echart2"]);
      let option = {
        color: ["green"], //设置颜色
        title: {
          text: "成绩", //标题展示
          textStyle: {
            color: "#6a9955", //标题颜色
            fontStyle: "normal", //标题字体【italic（斜体）,normal（通用）】
          },
        },
        xAxis: {
          type: "value", //数值轴
        },
        yAxis: {
          type: "category", //类目轴
          data: ["小明", "小青", "小红", "小智"],
        },
        series: [
          {
            name: "语文",
            type: "bar", //图表类型【bar,line,pie】
            data: [78, 60, 99, 55],
            markPoint: {
              // 图表标注
              data: [
                //标注的数据数组
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            markLine: {
              //图表标线
              data: [
                //标线的数据数组
                {
                  name: "平均线", // 支持 'average', 'min', 'max'
                  type: "average",
                },
              ],
            },
            label: {
              //图形上的文本标签
              show: true, //是否展示
              position: "inside", //展示位置【top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight】
            },
          },
        ],
      };
      charts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echart_container {
  height: 100%;
  // background-color: gray;
}
</style>
